<template>
	<block v-if="loading">
		<empty :loading="true"></empty>
	</block>
	<block v-else>
		
		<view>
			<view class="bg father bb fixed flex pb200">
				<view class="grayCirle right"></view>
				<view class="grayCirle left"></view>
				<view style="width: 100%;">
					<view class="pd text-center">
						<view class="w60 center-block">
							<view class="square rds100" style="overflow: hidden;">
								<open-data class="item" type="userAvatarUrl"></open-data>
							</view>
						</view>
						<view class="mt10">
							<view class="fz15 mb10" v-if="data.staffName">{{data.staffName}}</view>
							<view class="fz15">{{data.name}}</view>
						</view>
						<view class="op9">{{data.mobile}}</view>
					</view>
					
					<view class="outerBg flex text-center black safeBottom">
						<image src="../../static/wave.gif" mode="scaleToFill" class="gif-wave"></image>
						<view class="grid text-center" v-if="data.role==1">
							<navigator hover-class="op9" :url="`/pages/staffList/staffList`">
								<view class="w30 center-block">
									<view class="square">
										<image src="../../static/workers.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="pt5">员工管理</view>
							</navigator>
							<view>
								<view class="w30 center-block" @tap="quit">
									<view class="square">
										<image src="../../static/quit.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="pt5">退出登录</view>
							</view>
						</view>
						<view style="width: 100%;"  v-else>
							<view class="main"  @tap="quit">退出登录</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</block>
</template>

<script>
	export default {
		data() {
			return {
				data :{
					name : "" ,
					roleName : "",
					mobile : ""
				},
				loading : true 
			}
		},
		
		onLoad() {
			this.loadData();
		},
		
		methods: {
			
			loadData:function(e){
				var data = {} ;
				this.kit.get("/api/wxuser/info",data,res => {
					this.data = res.data ;
					this.loading = false ;
				});
			},
			
			quit:function(e){
				uni.removeStorageSync("token");
				uni.removeStorageSync("role");
				this.isLogin = false ;
				uni.reLaunch({
					url:"/pages/index/index"
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.outerBg{
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		min-height: 200rpx;
		.gif-wave{
		  position: absolute;
		  width: 100%;
		  left: 0;
		  z-index: 99;
		  mix-blend-mode: screen;
		  height: 140rpx;  
		  top: -138rpx;
		}
	}
	
	.grayCirle{
		background-color:#4590ff;
		width: 100px;
		height: 100px;
		border-radius: 100%;
	}
	
	.grayCirle.left{
		position: fixed;
		left: -14%;
		bottom: 400upx;
	}
	.grayCirle.right{
		position: fixed;
		right: -14%;
		top: 20%;
	}
</style>
